import React from 'react';
import {Icon, List, Checkbox} from 'antd';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';

import cssModules from 'react-css-modules';
import styles from './style.less';

@inject('HouseholdStore')
@observer
@cssModules(styles)
class DataList extends React.Component {
  constructor(props) {
    super(props);

    this.store = this.props.HouseholdStore;
  }

  render() {
    const {
      listItemClick,
      listPagination,
      listData,
      getBlock,
      onCheckChange,
      onCheckAllChange,
      listLoading,
      indeterminate,
      checkAll,
    } = this.store;
    return (
      <List
        bordered
        header={
          <div styleName={'list-header'}>
            <Checkbox
              onChange={onCheckAllChange}
              indeterminate={indeterminate}
              defaultChecked={false}
              checked={checkAll}
            />
            <span styleName={'list-header-title'}>幢数</span>
          </div>
        }
        dataSource={listData}
        styleName={'building-list'}
        loading={listLoading}
        pagination={{
          onChange: page => {
            getBlock({pageNo: page});
          },
          pageSize: listPagination.pageSize || 10,
          total: listPagination.total || 0,
          showTotal: (total, range) => `共 ${total} 幢`,
        }}
        renderItem={(item, index) => (
          <List.Item
            className={item.active && styles['list-active']}
            onClick={e => {
              clearTimeout(this.timer);
              this.timer = setTimeout(() => {
                listItemClick(item.blockId, index);
              });
            }}>
            <div className={styles['item-checked']}>
              <Checkbox
                onChange={e => {
                  clearTimeout(this.timer);
                  onCheckChange(item, index, e);
                }}
                checked={item.checked}
              />
            </div>
            <span className={styles['item-title']}>{item.block}</span>
            <Icon type="right" />
          </List.Item>
        )}
      />
    );
  }
}

export default DataList;
